<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row type="flex" justify="space-between" align="middle" style="width: 100%; background-color: #87CEEB; padding: 0 20px;">
          <el-col :span="15" style="display: flex; align-items: center;justify-content: flex-start; ">
            <h1 style="margin: 0; color: white;">东软环保公众监督平台管理系统</h1>
          </el-col>
        </el-row>
      </el-header>

      <el-container style="height: calc(100vh - 64px);">
		<el-aside width="250px" style="background-color: #f2f2f2; padding: 20px; display: flex; flex-direction: column;">
		  <LeftMenu style="flex: 1;"></LeftMenu>
		</el-aside>

        <el-main style="padding: 20px;">
          <router-view></router-view><!-- 路由出口 -->
        </el-main> 
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import LeftMenu from'@/components/admin/LeftMenu'
import axios from'axios'
import qs from 'qs'
import { useRoute } from 'vue-router';

const route=useRoute()
const routequery=route.query

let formref=ref({
})



 let weather=reactive({
	 attr:{}
 })
 
// onMounted(()=>{
// 	let obj={
// 		key:"644aa2046b9596a090abcfb75110301a",
// 		city:101070101,
// 		type:1
// 	};
// 	let objstr=qs.stringify(obj);
// 	console.log(objstr);
// 	axios.post("https://apis.tianapi.com/tianqi/index",objstr)
// 	.then(res=>{
// 		weather.attr=res.data.result;
// 		console.log(weather.attr);
// 	})
// 	.catch(err=>{
// 		console.log(err);
// 	})
// })
</script>

<style scoped>
.common-layout {
  font-family: 'Arial', sans-serif;
}

.el-header {
  background-color: #87CEEB;
  height: 64px;
  line-height: 64px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-row {
  margin: 0;
  padding: 0 20px;
}

.el-row h1 {
  color: white;
  font-size: 24px;
  margin: 0;
}

.el-aside {
  background-color: #f2f2f2;
  padding: 20px;
}

.el-main {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>